import React, { Component } from 'react'
import './index.css'
import Item from '../Item'
import PropTypes from 'prop-types'

export default class Content extends Component {
    
    static propTypes = {
        todos:PropTypes.array.isRequired,
        updateTodo:PropTypes.func.isRequired
    }

    render() {
        const {todos} = this.props
        return (
            <div className="content">
                <ul>
                    {
                        todos.map((item)=>{
                            // react的循环是一定需要一个key的，也就是唯一标识，还记得之前说的diffing算法吗？
                            return <Item {...item} key={item.id} updateTodo={this.props.updateTodo} deleteTodo={this.props.deleteTodo}/>
                        })
                    }
                </ul>
            </div>
        )
    }
}
